<template>
  <div class="hangerHomeBox">
    <CommonHeader :title="'挂片模式'" :userData="userData">
      <template v-slot>
        <div class="linkItem">
          <van-button class="btn" type="primary" color="#007DBC" @click="selectGroup">{{groupName}}</van-button>
        </div>
        <!-- <div class="linkItem">
          <img src="@/assets/img/todayWork.png" alt="">
          <span>今日任务</span>
        </div> -->
        <div class="linkItem" @click="toClothing">
          <img src="@/assets/img/makeCloth.png" alt="">
          <span>制衣单</span>
        </div>
      </template>
    </CommonHeader>
    <div class="hangerContent">
      <div v-if="showFlag" class="descBox">
        <span>当前班组未创建今日挂片任务</span>
        <span>请在客户端中创建后</span>
        <span>重新登录以查看</span>
      </div>
      <div v-else class="hangerTask">
        <div class="taskContainer" v-if="!groupFlag">
          <div class="taskTitle">今日挂片任务</div>
          <div class="taskBox">
            <div class="taskItem" v-for="(item,index) in 14" :key="index">
              <div class="itemLeft">
                <div class="item">
                  <span>生产单号</span>
                  <span>MU646488</span>
                </div>
                <div class="item">
                  <span>款号</span>
                  <span>S</span>
                </div>
                <div class="item">
                  <span>颜色</span>
                  <span>黑色</span>
                </div>
                <div class="item">
                  <span>尺码</span>
                  <span>L</span>
                </div>
                <div class="item">
                  <span>目标产量</span>
                  <span>500</span>
                </div>
                <div class="item">
                  <span>挂片比例</span>
                  <span>50%</span>
                </div>
              </div>  
              <div class="itemRight">
                <van-image width="125" height="160" radius="5" src="" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="taskContainer" v-else>
          <div class="taskTitle">班组选择</div>
          <div class="groupBox">
            <div :class="{'active':activeIndex === index}" class="groupItem" @click="selectClick(item,index)" v-for="(item,index) in 14" :key="index">
              <div>吊挂{{index+1}}组</div>
            </div>
          </div>
          <template v-if="14 % 3 > 0">
            <div class="groupItemAfter" v-for="(v,k) in (3 - 14 % 3)" :key="k"></div>
          </template>
        </div>
        <div class="btnBox">
          <van-button class="btn" type="primary" color="#007DBC" v-if="!groupFlag" @click="start">开始任务</van-button>
          <van-button class="btn" type="primary" color="#007DBC" @click="save" v-else>保存</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonHeader  from '@/components/CommonHeader'
import {Toast} from 'vant'
export default {
  data() {
    return {
      showFlag: false,
      groupFlag: false,
      activeIndex: '',
      groupName: '选择班组',
      activeItem: '',
      userData:{},
      OrderDetail:[]
    }
  },
  mounted(){
    if(sessionStorage.getItem('userData')){
      this.userData = JSON.parse(sessionStorage.getItem('userData'))
      // this.initWebSocket()
    }
    
  },
  methods:{
    initWebSocket(){//初始化websocket
      let reuestAddress = localStorage.getItem('requestAddress')?JSON.parse(localStorage.getItem('requestAddress')):{}
      const wsuri = 'ws://'+reuestAddress.wsAddress;
      this.websock = new WebSocket(wsuri);//这里面的this都指向vue
      this.websock.onopen = this.websocketopen;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onclose = this.websocketclose;
      this.websock.onerror = this.websocketerror;
    },
    websocketopen(){//打开
      console.log("WebSocket连接成功")
      let params = JSON.stringify({
        LineNumber: this.userData.lineNumber,
        StationNum: this.userData.stationNum,
        JobNumber: this.userData.jobNumber,
        GroupCode: this.userData.groupCode,
        // LineType:'线内'
      })
      console.log(params)
      this.websock.send(params);
    },
    websocketonmessage(e){ //数据接收
      console.log(JSON.parse(e.data))
      this.OrderDetail = JSON.parse(e.data)
      // 默认选中第一个
      if(JSON.parse(e.data).WorkSubList.length>0){
        this.selectItemData = this.sewingData.WorkSubList[0]
        console.log(this.selectItemData)
      }
      if(this.showFlag){
        this.$nextTick(() =>{
        this.initEcharts()
      })
      }
    },
    websocketclose(){ //关闭
      console.log("WebSocket关闭");
    },
    websocketerror(){ //失败
      Toast("WebSocket连接失败")
      console.log("WebSocket连接失败");
      this.initWebSocket()
    },
    selectClick(item,index){
      this.activeIndex = index
      this.activeItem = item
    },
    toClothing(){
      this.$router.push('/hanger/clothingList')
    },
    start(){
      this.$router.push('/hanger/startTask')
    },
    selectGroup(){
      this.groupFlag = true
    },
    save(){
      this.groupFlag = false
      this.groupName = `吊挂${this.activeItem}组`
    }
  },
  components:{
    CommonHeader
  }
}
</script>

<style lang="less" scoped>
  .hangerHomeBox{
    background: #E7F3F9;
    height: 100%;
    display: flex;
    flex-direction: column;
    .linkItem{
      display: flex;
      align-items: center;
      // margin-right: 20px;
      height: 100%;
      width: 110px;
      // border: 1px solid #000;
      position: relative;
      z-index: 10;
      justify-content: center;
      img{
        width: 24px;
        margin-right: 5px;
      }
      &::before{
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        // background: #58a;
        transform: skewX(15deg);
        // border-right: 1px solid #eee;
        border-left: 1px solid #eee;
      }
      &:last-child::before{
        border-right: 0;
      }
      &:first-child{
        width: 125px;
      }
    }
    .hangerContent{
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      height: calc(100% - 70px);
      // display: flex;
      // background: #fff;
      padding: 18px;
      position: relative;
      width: 100%;
      .descBox{
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        flex: 1;
        span{
          font-size: 22px;
          line-height: 34px;
        }
      }
      .hangerTask{
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: scroll;
        .taskContainer{
          background: #fff;
          padding: 15px;
          box-sizing: border-box;
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: scroll;
          .taskTitle{
            font-size: 22px;
            border-bottom: 1px solid #007DBC;
            color: #007DBC;
            padding-bottom: 10px;
          }
          .taskBox{
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            overflow: scroll;
            .taskItem{
              width: 33%;
              display: flex;
              margin-top: 10px;
              .itemLeft{
                flex-shrink: 0;
                margin-right: 20px;
                .item{
                  display: flex;
                  font-size: 20px;
                  line-height: 30px;
                  span:first-child{
                    width: 85px;
                    text-align: right;
                    margin-right: 15px;
                  }
                  span:last-child{
                    color: #007DBC;
                  }
                }
              }
            }
          }
          .groupBox{
            display: flex;
            flex-wrap: wrap;
            // justify-content: space-between;
            overflow: scroll;
            .groupItem{
              width: 31%;
              background: #F8F9F9;
              color: #007DBC;
              height: 90px;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 10px;
              font-size: 25px;
              margin: 10px;
            }
            .msgItemAfter {
              content:' ';
              width: 31%;
              margin: 10px;
            }
            .active{
              background: #007DBC;
              color: #fff;
            }
          }
        }
        .btnBox{
          margin-top: 10px;
          background: #fff;
          width: 100%;
          padding: 12px 0;
          display: flex;
          justify-content: center;
          .btn{
            width: 35%;
            font-size: 25px;
            height: 55px;
          }
        }
      }
    }
  }
</style>